<template>
  <div style="display: flex;flex-direction: column;width: 80%;color: #000000">
    <el-form ref="formRef" v-model="formRef">
      <el-form-item prop="age" label="年龄">
        <el-input type="number" size="large" v-model="formData.age" placeholder="输入年龄"></el-input>
      </el-form-item>
      <el-form-item prop="gender" label="性别">
        <el-select size="large" v-model="formData.gender" placeholder="请选择性别">
          <el-option :value="0" label="男"></el-option>
          <el-option :value="1"  label="女"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="height" label="身高">
        <el-input type="number" size="large" v-model="formData.height" placeholder="输入身高(米)"></el-input>
      </el-form-item>
      <el-form-item prop="weight" label="体重">
        <el-input type="number" size="large" v-model="formData.weight" placeholder="输入体重(千克)"></el-input>
      </el-form-item>
      <el-form-item prop="level" label="水平">
        <el-select size="large" v-model="formData.level" placeholder="请选择你当前的健身水平">
          <el-option :value="1" label="新手"></el-option>
          <el-option :value="2" label="入门"></el-option>
          <el-option :value="3" label="专家"></el-option>
        </el-select>
      </el-form-item>
      <el-button type="primary" element-loading-text="生成计划中..." v-loading.fullscreen.lock="fullscreenLoading"
                 size="default" @click="genPlan">生成健身计划</el-button>
    </el-form>
    <el-divider type="dashed"></el-divider>
    <div v-show="showPlan">
      <el-row>
        <el-col :span="6">建议每日卡路里消耗：</el-col><el-col :span="18">{{planData.calories}}</el-col>
      </el-row>
      <el-row>
        <el-col :span="6">建议每日每次训练时长：</el-col><el-col :span="18">{{planData.duration}}</el-col>
      </el-row>
      <el-row>
        <el-col :span="6">建议每周训练次数：</el-col><el-col :span="18">{{planData.frequency}}</el-col>
      </el-row>
      <el-row>
        <el-col :span="6">心率：</el-col><el-col :span="18">{{planData.heartRate}}</el-col>
      </el-row>
      <el-row>
        <el-col :span="6">类型：</el-col><el-col :span="18">{{planData.workoutType}}</el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup lang="ts">
import {onMounted, ref} from "vue";
  import {useRouter} from "vue-router";
import {editPwd} from "@/api/account.ts";
import storage from "@/utils/storage.ts";
import {ElMessage} from "element-plus";
import {genPlanRecommend} from "@/api/plan.ts";


  const router = useRouter()
  const activeMenuItem = router.currentRoute.value.path;
  const activeName = "/profile";
  const formRef = ref()
  const formData = ref({
    height: '',
    weight: '',
    age: '',
    gender: null,
    level: null
  })
  const user = ref({})
  const showPlan = ref(false);
  const planData = ref({});
  const fullscreenLoading = ref(false);

  const genPlan = () => {
    fullscreenLoading.value = true;
    console.log('formData',formData.value);
    const params = {
      age: parseInt(formData.value.age),
      gender: formData.value.gender,
      level: formData.value.level,
      height: parseInt(formData.value.height),
      weight: parseInt(formData.value.weight)
    }
    genPlanRecommend(params).then(res => {
      if(res.code == '00000'){
        console.log(planData.value);
        planData.value = res.data
        showPlan.value = true
        fullscreenLoading.value = false;
      }
    }).finally(() => {
      fullscreenLoading.value = false;
    })
  }
  onMounted(()=>{
    user.value = JSON.parse(storage.getItem("userInfo"))
  })
</script>

<style scoped>

</style>